<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div class="location">
      <ul>
        <li v-for="(item,index) in list" @click="located(item.id,item.name,item.level)">
          <div class="fl_right"><img src="../assets/image/arrowRightG.png" alt=""></div>
          <div class="fl_mr">{{item.name}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Located',
    data () {
      return {
        show: false,
        list: [],
        us_province: '',
        us_county: '',
        us_city: ''
      }
    },
    methods: {
      located: function (id, name, level) {
        let thisObj = this
        if (level === '1') {
          thisObj.us_province = name
          thisObj.list = []
          thisObj.address(id)
        } else if (level === '2') {
          thisObj.us_city = name
          thisObj.list = []
          thisObj.address(id)
        } else {
          thisObj.us_county = name
          thisObj.submit()
        }
      },
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      submit: function () {
        let thisObj = this
        thisObj.setmode('manger', 'two')
        thisObj.setmode('usprovince', thisObj.us_province)
        thisObj.setmode('uscity', thisObj.us_city)
        thisObj.setmode('uscounty', thisObj.us_county)
        setTimeout(function () {
          window.history.go(-1)
        }, 300)
      },
      address: function (id) {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            id: id
          },
          slient: true,
          userinfo: false,
          url: 'User/getCity',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.list = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        this.setmode('need-address', true)
        this.$chaos.setTitle('所在地区')
        this.$store.commit('title', '所在地区')
        this.$store.commit('footerShow', false)
        thisObj.$chaos.ajax({
          data: {
            id: ''
          },
          slient: true,
          userinfo: false,
          url: 'User/getCity',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.list = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      }
    },
    created: function () {
      this.verify()
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  .fl_mr{
    font-size: 16px;
  }
  .location{
    padding: 5px 15px;
    background: #fff;
    overflow: hidden;
    margin-top:4px;
  }
  .location li{
    line-height: 44px;
  }
  .achievement{
    width:100%;
    height:auto;
    padding-top: 46px;
  }
  .fl_right{
    float: right;
    width: 10px;
    height: 15px;
    margin-top: 2px;
  }
  .fl_right img{
    width:100%;
    height:100%;
  }
  .about-us {
    padding: 0px 20px;
  }
  img{
    width:100%;
    height:100%;
  }
</style>
